<!--
 * @FilePath     : /study_code/layui/6-4-9.html
 * @Description  : btn, yes/btn1, btn2... ; btnAlign 按钮配置
 * @Date         : 2025-04-08 16:46:28
 * @Author       : Fang YingGui
 * @LastEditors  : fangyinggui 18715384437@163.com
 * @LastEditTime : 2025-04-08 20:52:56
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>documentName</title>
    <link rel="stylesheet" href="/layui/dist/css/layui.css" />
  </head>
  <body>
    <script src="/layui/dist/layui.js"></script>
    <script>
      // type参数
      layui.use('layer', function () {
        var layer = layui.layer,
          $ = layui.$

        layer.open({
          type: 0,
          content: '<div>文字信息</div>',

          /**
           * @默认
           * # type: 0 为信息框时，btn默认是一个确认按钮
           * !其他层类型默认不显示；加载层和 tips 层则无效。
           */
          btn: '我知道了',

          /**
           * @默认
           * #type: 0 为信息框时；btn默认是一个确认按钮；
           * #其他层类型默认不显示；加载层和 tips 层则无效。
           * @定义多个按钮
           * #value {string} 只有一个按钮时，用字符串表示
           * #value {array} 多个按钮时用数组格式表示，字符串元素为按钮文字
           * @按钮对应回调
           *按钮 1 的回调是 yes/btn1，而从按钮 2 开始，则回调为 btn2: function(){}，以此类推。
           */
          // btn: '我知道了', // 定义一个按钮
          // btn: ['yes', 'no'],
          // btn: ['按钮 1', '按钮 2', '按钮 3'],
          // yes: function() {}
          btn1: function () {
            console.log('1个按钮的回调')
            layer.closeAll()
          },
          btn2: function () {},

          /**
           * !多个按钮的回调
           */
          // , btn: ['按钮1', '按钮2', '按钮3'] // 多个按钮
          // , btn1: function (index, layero) {
          //   console.log('按钮1的回调')
          //   console.log('按钮1参数index', index)
          //   console.log('按钮1参数layero', layero)
          //   layer.close(index)
          // }
          // , btn2: function (index, layero) {
          //   console.log('按钮2的回调')
          //   console.log('按钮2参数index', index)
          //   console.log('按钮2参数layero', layero)
          // }
          // , btn3: function (index, layero) {
          //   console.log('按钮3参数index', index)
          //   console.log('按钮3参数layero', layero)
          //   console.log('按钮3的回调')
          // }

          // @ closeBtn 关闭按钮
          // , closeBtn: 0 // 不显示
          // , closeBtn: 1 // 风格1：（默认，可不设置）旋转45°的十字图标

          /**
           * @brief: 按钮（相对外框）对其方式
           * @value {string}
           * l 按钮左对齐
           * c 按钮居中对齐
           * r 按钮右对齐 （默认值，不用设置）
           */
          btnAlign: 'l',
        })
      })
    </script>
  </body>
</html>
